import React, {useState, useRef} from 'react';
import {message, Button, Tabs,DatePicker, Divider,Popconfirm} from 'antd';
import {PageHeaderWrapper} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {connect} from 'umi';
import {queryPersonalManageList} from '../../service';
import {assessPeriodList} from "@/utils/constant";
import BatchAllocationForm from '../../components/BatchAllocationForm';
import DetailedAllocationForm from '../../components/DetailedAllocationForm';
import moment from 'moment';

const {TabPane} = Tabs;

const TableList = () => {

  const actionRef = useRef();
  const actionRef2 = useRef();
  const [record,setRecord] = useState(null);
  const [visible,setVisible]=useState(false);
  const [loading, setLoading] = useState(false);
  const [detailedVisible,setDetailedVisible] = useState(false);


  const handleChangTabIndex = (key) => {
    if (key === '1') {
      actionRef.current && actionRef.current.reload();
    } else {
      actionRef2.current && actionRef2.current.reload();
    }
  };

  const batchAllocation = (record) => {
    setVisible(true);
    console.log("批量分配：" + record)
  };

  const detailedAllocation = (record) => {
    setDetailedVisible(true);
    console.log("详细分配：" + record)
  };

  const handleBatchSubmit = (values) => {
    setLoading(true);
    // saveAndUpdatePerformanceRatio(values).then(res => {
    //   if (res.flag) {
    //     handleCancel();
    //     message.success(`保存成功！`);
    //   } else {
    //     message.error(`保存失败，错误:` + res.error);
    //   }
    //   setLoading(false);
    // })
  };

  const handleCancel = () => {
    setVisible(false);
    setDetailedVisible(false);
    setRecord(null);
  };

  const columns = [
    {
      title: '流水号',
      dataIndex: 'codeNum',
      hideInSearch: true,
    },
    {
      title: '绩效方案',
      dataIndex: 'name',
    },
    {
      title: '考核年度',
      dataIndex: 'assessYear',
      render: (text) => {
        return text != '-' ? moment(text).format('YYYY') : '';
      },
      renderFormItem: (item, props) => {
        return <DatePicker className='widthStyle' picker="year" {...props}/>;
      }
    },
    {
      title: '考核周期',
      dataIndex: 'cycle',
      hideInSearch: true,
      render: (text) => {
        return assessPeriodList.find((item) => item.value === text)?.label;
      }
    },
    {
      title: '考核单位',
      dataIndex: 'name',
    },
    {
      title: '参与考核人数',
      dataIndex: 'number',
      hideInSearch: true
    },
    {
      title: '操作人',
      dataIndex: 'number',
    },
    {
      title: '操作人工号',
      dataIndex: 'number',
      hideInSearch: true
    },
    {
      title: '审批状态',
      dataIndex: 'approveStatus',
      hideInSearch: true,
      valueEnum: {
        0: { text: '待发起', status: 'Default' },
        1: { text: '审批中', status: 'Processing' },
        2: { text: '已审批', status: 'Success' },
        3: { text: '作废', status: 'Warning' },
      },
    },
    {
      title: '分配状态',
      dataIndex: 'status',
      hideInSearch: true,
      valueEnum: {
        0: { text: '待分配', status: 'Default' },
        1: { text: '分配中', status: 'Processing' },
        2: { text: '已分配', status: 'Success' },
        3: { text: '作废', status: 'Warning' },
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      align:'center',
      render: (item, record) => (
        <>
          <a onClick={() => batchAllocation(record)}>批量分配</a>
          <Divider type="vertical"/>
          <a onClick={() => detailedAllocation(record)}>详细分配</a>
        </>
      ),
    },
  ];


  return (
    <PageHeaderWrapper>
      <Tabs animated={false} defaultActiveKey="1" onChange={handleChangTabIndex}>
        <TabPane tab="待办理" key="1">
          <ProTable
            actionRef={actionRef}
            rowKey="id"
            request={(params) => queryPersonalManageList(params, 1)}
            columns={columns}
          />
          <BatchAllocationForm
            loading={loading}
            visible={visible}
            onCancel={handleCancel}
            onSubmit={handleBatchSubmit}
          />
          <DetailedAllocationForm
            loading={loading}
            visible={detailedVisible}
            onCancel={handleCancel}
            onSubmit={handleBatchSubmit}
          />
        </TabPane>
        <TabPane tab="已办理" key="2">
          <ProTable
            actionRef={actionRef2}
            rowKey="id"
            request={(params) => queryPersonalManageList(params, 2)}
            columns={columns}
          />
        </TabPane>
      </Tabs>
    </PageHeaderWrapper>
  )
};

export default connect(({}) => ({}))(TableList)
